<template>
    <u-popup :show="show" @close="show = false" mode="bottom" :round="10" :closeable="true">
        <view @touchmove.prevent.stop class="popup-common">
            <view class="title">请选择支付方式</view>
            <view class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] py-[30rpx]">

                <view class="flex justify-around commission-content mb-[20rpx]">
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">订单金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.totalPrice
                            ) }}</text>
                    </view>
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">已付金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.paidPrice
                            ) }}</text>
                    </view>
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">待支付金额(元)</text>
                        <text class=" text-[var(--price-text-color)]  price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.payPrice
                            ) }}</text>
                    </view>
                </view>
                <up-line dashed></up-line>

                <view class="flex justify-around commission-content  mt-[20rpx]">
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">欠款金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.arrearsPrice
                            ) }}</text>
                    </view>
                    <view class="flex flex-col items-center">
                        <text class="text-[30rpx] text-[var(--text-color-light9)]">优惠金额(元)</text>
                        <text class="text-[#303133] price-font text-[38rpx] font-500 mt-[16rpx]">{{
                            fen2yuan(state.orderInfo.price.givePrice
                            ) }}</text>
                    </view>

                </view>

            </view>
            <scroll-view scroll-y="true" class="h-[50vh] pt-[10rpx]">

                <view v-for="(item, index) in state.paymentMap" :key="index"
                    class="flex items-center mx-[var(--popup-sidebar-m)] border-1 border-[#eee] border-solid rounded-[var(--rounded-mid)] px-[var(--pad-sidebar-m)] "
                    :class="{
                        'mb-[var(--top-m)]': true, 'text-[var(--primary-color)] !border-[var(--primary-color)]': item.payStatus
                    }" @click="selectPayMent(index)">
                    <view class="flex items-center w-[100%] py-[20rpx]">
                        <view class="w-[100rpx] h-[100rpx] rounded-[8rpx] relative">
                            <image :src="item.icon" class="w-[100rpx] h-[100rpx]"></image>

                        </view>
                        <view class="flex-1  flex items-center ml-[20rpx]   box-border py-[30rpx] border-0">
                            <view class="flex-1">
                                <view class="text-[32rpx] text-[#333] font-bold truncate max-w-[260rpx]">{{
                                    item?.classiName }}

                                </view>

                            </view>
                            <view class=" w-[250rpx] flex text-[#303133] justify-end items-center">

                                <text class="text-[42rpx] ml-[10rpx] text-[var(--primary-color)]  price-font"
                                    v-if="item.payStatus">￥{{
                                        fen2yuan(item.totalPayPrice)
                                    }}</text>

                            </view>

                        </view>
                    </view>

                </view>

                <view class="text-[var(--text-color-light6)] text-[32rpx] text-center"
                    v-if="state.paymentMap.length == 0">暂无支付方式</view>

            </scroll-view>
            <view class="btn-wrap">
                <button class="primary-btn-bg btn" v-if="state.orderInfo.price.payPrice == 0"
                    @click="confirm">确认</button>

                <button class="!bg-[#ccc] btn" v-else>确认</button>
            </view>
        </view>
    </u-popup>
    <!-- 弹框 -->
    <paymentPopup ref="paymentPopupRef" v-if="state.orderInfo" :order-info="state.orderInfo"
        :payment-map="state.paymentMap" :scene-type="state.sceneType" @confirm="onSelectPaymentPay"
        @success="handleUpdate" />
</template>

<script setup lang="ts">
import { ref, watch, computed, reactive } from 'vue'
import { fen2yuan, yuan2fen } from '@/utils/formatting';
import paymentPopup from '../payment-popup/payment-popup.vue';
const props = defineProps({
    orderInfo: {
        type: Object,
        default: () => {
            return {

            }
        }
    }, //订单信息
    paymentMap: {
        type: Array,
        default: () => {
            return []
        }
    },
    sceneType: {
        type: String,
        default: 'first'
    }
})


const state = reactive({
    orderInfo: computed(() => {
        return props.orderInfo
    }), // 支付单信息
    paymentMap: computed(() => {
        return props.paymentMap
    }) as any, // 可选的支付方式
    sceneType: computed(() => {
        console.log(props.sceneType)
        return props.sceneType
    }),
    payment: '', // 选中的支付方式
    payOrderList: [] as any, //当前支付方式的支付流水号
    activeName: '', //当前选中的支付方式
})


const show = ref(false)
const emits = defineEmits(['confirm', 'confirmOrder', 'success'])
/** 选择支付方式 */
const nowPayment = ref() //当前使用的资产
const nowPaymentIndex = ref<any>() //当前支付方式的下标
const paymentPopupRef = ref()

const selectPayMent = async (index: any) => {
    nowPaymentIndex.value = index
    let item = state.paymentMap[index]
    if (!item.usable) {
        uni.showToast({
            title: '该支付方式不可用',
            icon: 'none'
        })
        return
    }
    if (!item.payStatus && state.orderInfo.price.payPrice == 0) {
        uni.showToast({
            title: '已完成支付,如需更改,请先取消已使用的支付方式',
            icon: 'none'
        })
        return

    }
    console.log(item)
    nowPayment.value = item
    paymentPopupRef.value.open(nowPayment.value)

}





const open = () => {
    show.value = true


}

// 选择资产支付
const onSelectPaymentPay = async (item: any, classify: any) => {

    emits('confirm', item, classify)


    // uni.hideLoading()

}
const handleUpdate = () => {

    emits('success')
}


const confirm = () => {
    show.value = false
    emits('confirmOrder')
}

defineExpose({
    open,
})
</script>

<style lang="scss" scoped>
.popup-common .title {
    font-weight: 500;
    text-align: center;
    font-size: 1.125rem;
    padding-top: 1.125rem;
    line-height: 1;
    padding-bottom: 0;
}

.commission-bg {
    background: #f6f6f6;
}

.commission-content>view {
    position: relative;
    width: 6.5625rem
}

.commission-content>view:after {
    content: "";
    position: absolute;
    width: .0625rem;
    height: 1.875rem;
    background-color: var(--temp-bg);
    top: 50%;
    right: 0;
    transform: translateY(-50%)
}

.commission-content>view:last-of-type:after {
    width: 0;
    height: 0
}
</style>
